<template>
  <div class="risk-compliance c-shadow clearFix">
    <jTabNav :items="tabList"></jTabNav>
    <h4 class="detail-base-title clearFix" ref="riskDiffuse1">近一年招聘人员信息<span>{{recruitmentTotal || 0}}</span><b class="explain">说明：招聘人员特征为低学历的销售理财</b></h4>
    <div class="recruitment">
      <j-no-data v-if="!recruitmentData || recruitmentData.length === 0" :mode="'b'" msg="b"></j-no-data>
      <div class="table-wrap recruit" v-else>
        <table>
          <thead>
            <tr>
              <th v-for="title in recruitment" :key="title">{{title}}</th>
              <th>详情</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, ind) in recruitmentData" :key="item.recruitment">
              <td :title="item.job">{{item.job || '--'}}</td>
              <td>{{item.lowEducationBackgroud || '--'}}</td>
              <td>{{item.salary || '--'}}</td>
              <td>{{item.count || '--'}}</td>
              <td>{{item.workPlace || '--'}}</td>
              <td>{{item.publishDate || '--'}}</td>
              <td><button class="cancle-btn" @click="getInfo(recruitmentData[ind], 9)"><span>查看</span> </button></td>
            </tr>
          </tbody>
        </table>
        <div class="block paging-wrap fr">
          <el-pagination v-if="recruitmentTotal>5"
            @current-change="recruitmentChange"
            :current-page.sync="recruitmentParams.pageNum"
            :page-size="recruitmentParams.pageSize"
            layout="prev, pager, next, jumper"
            :total="recruitmentTotal">
          </el-pagination>
        </div>
      </div>
    </div>
    <h4 class="detail-base-title clearFix mgt10" ref="riskDiffuse2">
      招聘区域的扩张数量
      <span>{{total || 0}}</span>
      <b class="explain">说明：企业招聘职位工作区域</b>
      <a @click.prevent="changeRecurit('','')" v-if="title !== ''">
        查看全部招聘信息
      </a>
    </h4>
    <div class="branch">
      <j-no-data v-if="!branchtotal" :mode="'b'" msg="b"></j-no-data>
      <div class="table-wrap" v-else>
        <table class="kzqy">
          <thead>
            <tr>
              <th v-for="title in branch" :key="title">{{title}}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{branchData.oneYearCount || '--'}}</td>
              <!-- 近一年分公司数量 -->
              <td class="" v-if="oneYearPlaces.length > 0">
                  <!-- {{branchData.oneYearPlace}} -->
                <span v-for="one in oneYearPlaces" :key="one" :title="one">
                  <a @click.prevent="changeRecurit(one,'one')" v-if="one">{{one || '--'}}</a>
                  <span v-else>{{one || '--'}}</span>
                </span>
              </td>
              <td v-else>
                {{branchData.oneYearPlace || '--'}}
              </td>
              <td>{{branchData.twoYearCount || '--'}}</td>
              <!-- 上一年分公司数量 -->
              <td class="" v-if="twoYearPlaces.length > 0">
                <span v-for="two in twoYearPlaces" :key="two" :title="two">
                  <a @click.prevent="changeRecurit(two,'two')" v-if="two">{{two || '--'}}</a>
                  <span v-else>{{two || '--'}}</span>
                </span>
                <!-- <a v-for="two in twoYearPlaces" :key="two" :title="two" @click.prevent="changeRecurit(two,'two')">{{two || '--'}}</a> -->
              </td>
              <td v-else>
                {{branchData.twoYearPlace || '--'}}
              </td>
              <td>{{branchData.expansionCount || '--'}}</td>
              <!-- 扩张数量 -->
            </tr>
          </tbody>
        </table>
        <div class="table-wrap recruit1" v-if="recruitmentDataAll.length > 0">
          <h4 class="detail-title">
            {{title ? title + '地区' :'全部'}}招聘信息
            <span>
              {{recruitmentParams1.total}}
            </span>
          </h4>
          <table>
            <thead>
              <tr>
                <th v-for="title in recruitment" :key="title">{{title}}</th>
                <th>详情</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, ind) in recruitmentDataAll" :key="item.recruitment">
                <td :title="item.job">{{item.job || '--'}}</td>
                <td>{{item.lowEducationBackgroud || '--'}}</td>
                <td>{{item.salary || '--'}}</td>
                <td>{{item.count || '--'}}</td>
                <td>{{item.workPlace || '--'}}</td>
                <td>{{item.publishDate || '--'}}</td>
                <td><button class="cancle-btn" @click="getInfo(recruitmentDataAll[ind], 9)"><span>查看</span> </button></td>
              </tr>
            </tbody>
          </table>
          <div class="block paging-wrap fr">
            <el-pagination v-if="recruitmentParams1.total>5"
              @current-change="recruitmentChange1"
              :current-page.sync="recruitmentParams1.pageNum"
              :page-size="recruitmentParams1.pageSize"
              layout="prev, pager, next, jumper"
              :total="recruitmentParams1.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- <h4 class="detail-base-title clearFix" ref="riskDiffuse3">分公司扩张数量<span>{{expandData1.expandCount || 0}}</span></h4>
    <div class="branch"> -->
      <!-- 旧 -->
      <!-- <j-no-data v-if="expandData1.length === 0" :mode="'b'" msg="b"></j-no-data> -->
      <!-- 新 -->
      <!-- <j-no-data v-if="!exptotal1" :mode="'b'" msg="b"></j-no-data>
      <div class="table-wrap fgs" v-else>
        <table class="fzjg">
          <thead>
            <tr>
              <th v-for="title in expand1" :key="title">{{title}}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="" :title="expandData1.nearEntName">{{expandData1.nearEntName || '--'}}</td>
              <td class="" :title="expandData1.upEntName">{{expandData1.upEntName  || '--'}}</td>
              <td class="" :title="expandData1.expandEntName">{{expandData1.expandEntName  || '--'}}</td>
              <td>{{expandData1.expandCount && expandData1.expandCount !== '0' ? expandData1.expandCount : '--'}}</td>
            </tr>
          </tbody>
        </table>
      </div> -->
    <!-- </div> -->
    <!-- <h4 class="detail-base-title clearFix" ref="riskDiffuse4">子公司扩张数量<span>{{expandData.expandCount || 0}}</span></h4>
    <div class="branch"> -->
      <!-- 旧 -->
      <!-- <j-no-data v-if="expandData.length === 0" :mode="'b'" msg="b"></j-no-data> -->
      <!-- 新 -->
      <!-- <j-no-data v-if="!exptotal" :mode="'b'" msg="b"></j-no-data>
      <div class="table-wrap" v-else>
        <table class="fzjg">
          <thead>
            <tr>
              <th v-for="title in expand" :key="title">{{title}}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{expandData.nearEntName || '--'}}</td>
              <td class="" :title="expandData.upEntName">{{expandData.upEntName  || '--'}}</td>
              <td class="" :title="expandData.expandEntName">{{expandData.expandEntName  || '--'}}</td>
              <td>{{expandData.expandCount && expandData.expandCount !== '0' ? expandData.expandCount : '--'}}</td>
            </tr>
          </tbody>
        </table>
      </div> -->
    <!-- </div> -->
    <h4 class="detail-base-title clearFix" ref="riskDiffuse5">分支机构扩张<span>{{expCtotal || 0}}</span></h4>
    <div class="branch">
      <div class="table-wrap" v-if="expandCount.nearEntName || expandCount.upEntName || expandCount.expandEntName">
        <table class="fzjg">
          <thead>
            <tr>
              <th v-for="title in expand2" :key="title">{{title}}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td v-if="nearEntNames.length > 0">
                <!-- {{expandCount.nearEntName || '--'}} -->
                <span v-for="name in nearEntNames" :key="name" :title="name">
                  {{name}}
                </span>
              </td>
              <td :title="expandCount.nearEntName" v-else>
                {{expandCount.nearEntName || '--'}}
              </td>
              <td v-if="upEntNames.length > 0">
                <span v-for="name in upEntNames" :key="name" :title="name">
                  {{name}}
                </span>
              </td>
              <td class="" :title="expandCount.upEntName" v-else>
                {{expandCount.upEntName  || '--'}}
              </td>
              <td v-if="expandEntNames.length > 0">
                <span v-for="name in expandEntNames" :key="name" :title="name">
                  {{name}}
                </span>
                <!-- <span>{{expandEntNames.length}}</span> -->
              </td>
              <td class="" :title="expandCount.expandEntName" v-else>
                {{expandCount.expandEntName  || '--'}}
              </td>
              <td class="">{{expandCount.expandCount && expandCount.expandCount !== '0' ? expandCount.expandCount : '--'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <j-no-data :mode="'b'" msg="b" v-else></j-no-data>
    </div>
    <el-dialog title="详情" :visible.sync="show" width="80%">
      <div class="table-wrap dialog-wrap">
        <table>
          <tbody>
            <tr v-for="(item,idx) in contentKey" :key="idx" v-if="getValue(item)">
              <td width="18%" style="text-align:left">{{item}}</td>
              <td style="text-align:left" v-if="item === '职位描述'" v-html="getValue(item)"></td>
              <td style="text-align:left" v-else>{{getValue(item)}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { entdetail as api } from '../../api'
import { jNoData, jTabNav } from '../../components'
import { dir } from '../../assets/js/dir'
export default {
  data() {
    return {
      tabList: [],
      zp: 0,
      kz: 0,
      fen: 0,
      zi: 0,
      fzjg: 0,
      title:'',
      contentKey: [],
      oneYearPlaces:[],
      twoYearPlaces:[],
      nearEntNames:[],
      upEntNames:[],
      expandEntNames:[],
      // 舆情
      opinion: ['舆情名称', '传播量'],
      opinionData: [],
      dialogContent: '',
      contentDir: [],
      show: false,
      show2: false,
      pageNum: 1,
      pageSize: 5,
      entName: '',
      sentimentTotal: 0,
      recruitmentTotal: 0,
      recruitmentSize: 0,
      recruitment: ['职位', '学历要求', '薪资', '数量', '工作地点', '发布时间'],
      // 子公司
      expand: [
        '近一年的子公司',
        '上一年的子公司',
        '扩张企业',
        '扩张数量'
      ],
      // 分公司
      expand1: [
        '近一年的分公司',
        '上一年的分公司',
        '扩张企业',
        '扩张数量'
      ],
      expand2: [
        '近一年的分支机构',
        '上一年的分支机构',
        '扩张企业',
        '扩张数量'
      ],
      // 招聘数量量
      recruitmentData: [],
      recruitmentDataAll: [],
      branchtotal: 0,
      branch: [
        '近一年招聘区域数量',
        '近一年招聘区域',
        '上一年招聘数量',
        '上一年招聘区域',
        '扩张区域数量'
      ],
      branchData: {},
      sentimentParams: {},
      recruitmentParams: {
        pageNum: 1,
        pageSize: 5
      },
      recruitmentParams1: {
        total:0,
        pageNum: 1,
        pageSize: 5
      },
      total: '',
      // 子公司
      expandData: {},
      exptotal: 0,
      // 分公司
      expandData1: {},
      exptotal1: 0,
      expandCount: {},
      expCtotal: 0
    }
  },
  computed:{
    getValue() {
      return function(val) {
        let dialogContent = this.dialogContent
        if (typeof dialogContent === 'object') {
          let rtVal = dialogContent.get(val)
          return !isNaN(rtVal) && rtVal.toString().length === 13
            ? this.$options.filters['dateFormat'](rtVal)
            : rtVal
        } else {
          return false
        }
      }
    }
  },
  methods: {
    // 查看详情
    getInfo(content, idx) {
      let contentDir = 'contentDir_' + idx
      this.contentDir = dir[contentDir]
      let contentKey = [...new Map(this.contentDir).values()]
      this.contentKey = contentKey
      this.changeInt(content)
      this.show = true
    },
    changeInt(content) {
      let conMap = new Map()
      let contentDir = new Map(this.contentDir)
      for (let key of Object.keys(content)) {
        let name = contentDir.get(key)
        conMap.set(name, content[key])
      }
      this.dialogContent = conMap
    },
    changeRecurit(name, type) {
      if (type) {
        this.recruitmentParams1.dateType = type
      } else {
        this.recruitmentParams1.dateType = ''
      }
      if (name) {
        this.recruitmentParams1.workPlace = name
      } else {
        this.recruitmentParams1.workPlace = ''
      }
      this.recruitmentChange1(1)
    },
    getRecruit1() {
      this.recruitmentParams1.entName = this.entName
      this.recruitmentParams1.order = 'desc'
      this.recruitmentParams1.sortColumn = 'publish_date'
      api.getRecruitAll(this.recruitmentParams1).then(rtn => {
        if (!rtn.data || !rtn.data.list) return
        this.title = this.recruitmentParams1.workPlace || ''
        this.recruitmentDataAll = rtn.data.list
        rtn.data.list.map(list => {
          list.publishDate = list.publishDate.replace(new RegExp(' 00:00:00', "g"), '')
        })
        this.recruitmentParams1.total = rtn.data.total
      }).catch(err => {
        console.log(err)
        this.recruitmentDataAll = []
        this.recruitmentParams1.total = 0
        this.title = ''
      })
    },
    // 近一年招聘人员数量
    getRecruit() {
      let params = {
        pageNum: this.recruitmentParams.pageNum,
        pageSize: this.recruitmentParams.pageSize,
        entName: this.entName
      }
      params = Object.assign(params, this.recruitmentParams)
      api.getRecruit(params).then(rtn => {
        if (!this.zp) {
          this.tabList.push({
            idx: 1,
            name: '近一年招聘人员',
            num: rtn.data.total || 0,
            offsetTop: this.$refs['riskDiffuse1'] ? this.$refs['riskDiffuse1'].offsetTop : 0
          })
        }
        this.zp++
        if (!rtn.data || !rtn.data.list) return
        this.recruitmentData = rtn.data.list
        this.recruitmentTotal = rtn.data.total
        this.recruitmentSize = rtn.data.size
      }).catch(err => {
        console.log(err)
        if (!this.zp) {
          this.tabList.push({
            idx: 1,
            name: '近一年招聘人员',
            num: 0,
            offsetTop: this.$refs['riskDiffuse1'] ? this.$refs['riskDiffuse1'].offsetTop : 0
          })
        }
        this.zp++
      })
    },
    // 同时分公司子公司
    getentListPart() {
      let params ={
        entName: this.entName
      }
      api.getBranchEntList(params).then(rtn => {
        if (JSON.stringify(rtn.data) !== '{}') {
          // 子公司
          this.expandData = rtn.data.subsidiaries
          // this.expandData.nearEntName || this.expandData.upEntName || this.expandData.expandEntName ||
          if (this.expandData.nearEntName || this.expandData.upEntName || this.expandData.expandEntName || Number(this.expandData.expandCount)) {
            this.exptotal = 1
          } else {
            this.exptotal = 0
          }
          // 分公司
          this.expandData1 = rtn.data.branches
          // this.expandData1.nearEntName || this.expandData1.upEntName || this.expandData1.expandEntName ||
          if (this.expandData1.nearEntName || this.expandData1.upEntName || this.expandData1.expandEntName || Number(this.expandData1.expandCount)) {
            this.exptotal1 = 1
          } else {
            this.exptotal1 = 0
          }
          if (!this.zi) {
            this.tabList.push({
              idx: 4,
              name: '子公司扩张',
              num: this.expandData.expandCount || 0,
              offsetTop: this.$refs['riskDiffuse4'].offsetTop || 0
            })
          }
          this.zi++
          if (!this.fen) {
            this.tabList.push({
              idx: 3,
              name: '分公司扩张',
              num: this.expandData1.expandCount || 0,
              offsetTop: this.$refs['riskDiffuse3'].offsetTop || 0
            })
          }
          this.fen++
        }
      })
    },
    getlistpartCount() {
      let params ={
        entName: this.entName
      }
      api.getBranchEntListCount(params).then(ret => {
        if (!this.fzjg) {
          this.tabList.push({
            idx: 5,
            name: '分支机构扩张',
            num: ret.data.expandCount || 0,
            offsetTop: this.$refs['riskDiffuse5'] ? this.$refs['riskDiffuse5'].offsetTop : 0
          })
        }
        this.fzjg++
        if (!ret.data) return false
        this.expandCount = ret.data
        let regname = new RegExp('，', "g")
        let regChild = new RegExp('、', "g")
        let near = ret.data.nearEntName ? ret.data.nearEntName.replace(regname, ',').replace(regChild, ',') : ''
        let up = ret.data.upEntName ? ret.data.upEntName.replace(regname, ',').replace(regChild, ',') : ''
        let expand = ret.data.expandEntName ? ret.data.expandEntName.replace(regname, ',').replace(regChild, ',') : ''
        this.nearEntNames = near ? near.split(',') : []
        this.upEntNames = up ? up.split(',') : []
        this.expandEntNames = expand ? expand.split(',') : []
        this.expCtotal = ret.data.expandCount
      }).catch(err => {
        console.log(err)
        if (!this.fzjg) {
          this.tabList.push({
            idx: 5,
            name: '分支机构扩张',
            num: 0,
            offsetTop: this.$refs['riskDiffuse5'] ? this.$refs['riskDiffuse5'].offsetTop : 0
          })
        }
        this.fzjg++
      })
    },
    // 招聘区域的扩张数量
    getBranceOffice() {
      let params = {
        entName: this.entName
      }
      api.getBranceOffice(params).then(rtn => {
        if (!this.kz) {
          this.tabList.push({
            idx: 2,
            name: '招聘区域扩张',
            num: rtn.data.total || 0,
            offsetTop: this.$refs['riskDiffuse2'] ? this.$refs['riskDiffuse2'].offsetTop : 0
          })
        }
        this.kz++
        if (!rtn.data) return false
        this.branchData = rtn.data
        // let regname = new RegExp('，', "g")
        // let regChild = new RegExp(',', "g")
        // .replace(regname, '、').replace(regChild, '、')
        let oneplace = rtn.data.oneYearPlace ? rtn.data.oneYearPlace : ''
        // .replace(regname, '、').replace(regChild, '、')
        let twoplace = rtn.data.twoYearPlace ? rtn.data.twoYearPlace : ''
        this.oneYearPlaces = oneplace ? oneplace.split('、') : []
        this.twoYearPlaces = twoplace ? twoplace.split('、') : []
        this.total = rtn.data.total
        if (this.branchData.expansionCount || this.branchData.oneYearCount || this.branchData.twoYearCount) {
          this.branchtotal = 1
        } else {
          this.branchtotal = 0
        }
      }).catch(err => {
        console.log(err)
        if (!this.kz) {
          this.tabList.push({
            idx: 2,
            name: '招聘区域扩张',
            num: 0,
            offsetTop: this.$refs['riskDiffuse2'] ? this.$refs['riskDiffuse2'].offsetTop : 0
          })
        }
        this.kz++
      })
    },
    handleSizeChange() {
      // 当pagesize改变的时候出发该函数
    },
    recruitmentChange(index) {
      this.recruitmentParams.pageNum = index
      this.getRecruit()
    },
    recruitmentChange1(index) {
      this.recruitmentParams1.pageNum = index
      this.getRecruit1()
    }
  },
  mounted() {
    this.entName = this.$route.query.entname
    this.getRecruit()
    this.getRecruit1()
    this.getBranceOffice()
    // 同时分公司子公司
    // this.getentListPart()
    this.getlistpartCount()
  },
  components: {
    jNoData,
    jTabNav
  }
}
</script>
<style lang="scss" scoped>
.risk-compliance {
  padding: 28px 40px;
  font-size: 14px;
  .mgt10 {
    margin-top: 20px;
  }
  .detail-base-title {
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    padding: 30px 0 0 12px;
    position: relative;
    background-image: linear-gradient(0deg, #1891ef, #1891ef);
    background-size: 3px 16px;
    background-position: 0 37px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #eee;
  }
  .detail-title {
    line-height: 30px;
    font-size: 12px;
    padding: 30px 0 0 12px;
    position: relative;
    background-image: linear-gradient(0deg, #1891ef, #1891ef);
    background-size: 3px 16px;
    background-position: 0 37px;
    background-repeat: no-repeat;
  }
  h4.detail-base-title a {
    color: #1688f3;
    text-decoration: underline;
    margin: 0 10px;
    float: right;
    font-size: 14px;
  }
  h4.detail-title span {
    border: 1px solid #9dc5fd;
    border-radius: 10px;
    color: #1688f3;
    background: #f2f7ff;
    font-size: 12px;
    padding: 0 10px;
    margin-left: 15px;
    vertical-align: top;
  }
  h4.detail-base-title span {
    border: 1px solid #9dc5fd;
    border-radius: 10px;
    color: #1688f3;
    background: #f2f7ff;
    font-size: 12px;
    padding: 0 10px;
    margin-left: 15px;
    vertical-align: top;
  }
  .table-wrap {
    padding: 10px 20px 30px;
    table {
      border-collapse: collapse;
      width: 100%;
      text-align: center;
      td,
      th {
        border: 1px solid #e2e2e2;
        line-height: 38px;
      }
      th {
        line-height: 40px;
        color: #999;
        background: #f2f1f1;
      }
      td {
        padding: 0 10px;
      }
      .branchNum {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .fzjg {
      th:last-child{
        width: 100px;
      }
      td span {
        width: 90%;
        display: inline-block;
      }
    }
    .kzqy {
      th:first-child,
      th:nth-child(3),
      th:last-child{
        width: 130px;
      }
      a {
        width: 24%;
        display: inline-block;
        // margin: 1px 5px;
        text-align: center;
      }
    }
  }
  .recruit1 {
    margin-top: 10px;
  }
  .explain {
    color: red;
    margin-left: 5%;
    font-weight: 500;
    font-size: 12px;
  }
  /deep/ .el-dialog__header {
    padding: 10px;
    background: #3f8ffa;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__headerbtn {
      top: 12px;
      i {
        color: #fff;
      }
    }
  }
  .dialog-wrap {
    table {
      td,
      th {
        padding-left: 5px;
      }
    }
  }
}
</style>



// WEBPACK FOOTER //
// src/view/entDetail/riskDiffuse.vue